<template>
	<view class="content">
		<view class="top-block">
			<swiper style="height: 500rpx;width: 100%;" :indicator-dots="false" :autoplay="true" :circular="true"
				:interval="3000">
				<swiper-item v-for="(item,index) in info.swiperImage" :key="item.id">
					<image style="width: 100%;" :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<view class="info-block">
				<view class="detail-item">
					<view class="wage">￥<text class="txt">{{info.integral}}</text> 积分</view>
					<view class="name">{{info.name}}</view>
					<view class="describe">{{info.description}}</view>
				</view>
				<view class="title">— 商品详情 —</view>
				<mp-html :content="info.content"></mp-html>
				<view class="btn-item">
					<view class="btn" @click="openChoose">立即兑换</view>
				</view>
			</view>
		</view>
		<view v-if="displayChoose" class="choose-block">
			<view class="choose-content">
				<view class="choose">
					<view class="choose-item">
						<image :src="info.coverImage" class="choose-img" mode="aspectFill"></image>
						<view class="name-item">
							<view class="choose-name">{{info.name}}</view>
							<view class="wage">￥<text class="txt">{{info.integral}}</text> 积分</view>
						</view>
					</view>
					<view class="iconfont icon-guanbi" @click="closeChoose"></view>
				</view>
				<view class="count-block">
					<view class="count-title">选择数量</view>
					<view class="count-item">
						<view class="inventory">剩余库存{{info.inventory}}件</view>
						<view class="operation-block">
							<view @click="operationNum('-')" class="subtract-btn btn" :class="num==0?'disabled':''">
								<view class="iconfont icon-jianhao"></view>
							</view>
							<view class="num">{{num}}</view>
							<view @click="operationNum('+')" class="add-btn btn"
								:class="num==info.inventory?'disabled':''">
								<view class="iconfont icon-jiahao"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn-item">
					<view class="btn" @click="exchange">立即兑换</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getShoppingByIdApi,
		getRedeemApi
	} from '@/api/shopping.js'
	import {
		getStorage
	} from '@/util/auth.js';
	import {
		getInfoApi
	} from '@/api/mine.js'
	export default {
		data() {
			return {
				id: null,
				num: 0,
				info: {
					integral: 0,
					description: '',
					coverImage: '',
					name: '',
					count: 0,
					inventory: 0,
					swiperImage: []
				},
				displayChoose: false,
				price: 0,
				user: {
					auditStatus: '',
					villageId: ''
				},
				selectVillage: null,
				auditStatus: 0
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			openChoose() {
				this.displayChoose = true
				this.num = 0
			},
			closeChoose() {
				this.displayChoose = false
			},
			getDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getInfoApi({}).then(res => {
					uni.hideLoading()
					this.user = res
				}).catch(() => {
					uni.hideLoading()
				})
			},
			exchange() {
				let that = this
				if (getStorage('login')) {
					if (this.selectVillage == this.user.villageId) {
						if (this.user.auditStatus == 2) {
							if (this.num > 0) {
								if (this.user.integral >= this.price) {
									uni.showLoading({
										title: '提交中',
										mask: true
									})
									getRedeemApi({
										num: this.num,
										id: this.id,
										villageId: this.user.villageId
									}).then(res => {
										uni.hideLoading()
										uni.showToast({
											title: '提交成功',
											icon: 'success',
											duration: 1000,
											mask: true,
											success: function() {
												setTimeout(function() {
													that.displayChoose = false
													that.getList();
												}, 1000)
											},
										})

									}).catch(() => {
										uni.hideLoading()
									})
								} else {
									this.showToast('您的积分不足！')
								}
							} else {
								this.showToast('请选择数量！')
							}
						} else {
							this.showToast('您的资料还未审核通过！')
						}
					} else {
						this.showToast('请选择所在村组商品兑换！')
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '需要先登录！',
						cancelText: '先逛逛',
						confirmText: '去登录',
						success(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '/pages/mine/mine'
								})
							} else {
								uni.navigateBack();
							}
						}
					})
				}
				return false
			},
			operationNum(operation) {
				if (operation == '-' && this.num != 0) {
					this.num--;
				}
				if (operation == '+' && this.num != this.info.inventory) {
					this.num++;
				}
				if (this.num > this.info.inventory) {
					this.showToast('库存不足!')
				}
				this.price = this.info.integral * this.num;
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getShoppingByIdApi({
					id: this.id
				}).then(res => {
					uni.hideLoading()
					if (res.swiperImage && res.swiperImage.length > 0) {
						res.swiperImage = res.swiperImage.split(',');
					}
					this.info = res
					console.log(this.info)
				}).catch(() => {
					uni.hideLoading()
				})
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.selectVillage = getStorage('villageId')
		},
		onShow() {
			if (getStorage('login')) {
				this.getDetail()
			}
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		.info-block {
			background: #F5F9FC;
			min-height: 70vh;
			border-radius: 30rpx;
			margin-top: -30rpx;
			position: relative;
			padding: 30rpx;

			.detail-item {
				background: #fff;
				padding: 30rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;

				.wage {
					color: #157DFA;
					font-size: 30rpx;
					margin-bottom: 30rpx;

					.txt {
						font-size: 44rpx;
						margin-right: 10rpx;
					}
				}

				.name {
					font-size: 32rpx;
					line-height: 54rpx;
					font-weight: bold;
				}

				.describe {
					color: #828282;
					font-size: 30rpx;
					margin-bottom: 15rpx;
					margin-top: 30rpx;
				}
			}

			.title {
				width: 100%;
				display: flex;
				justify-content: center;
				margin: 30rpx auto;
				color: #808080;
			}

			.img-item {
				width: 100%;
				display: flex;
				flex-direction: column;

				.img {
					width: 100%;
					margin-bottom: 30rpx;
				}
			}

			.btn-item {
				width: calc(100% - 60rpx);
				position: fixed;
				bottom: 4%;
				display: flex;
				justify-content: center;

				.btn {
					background: #157DFA;
					color: #fff;
					width: 340rpx;
					height: 80rpx;
					border-radius: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.choose-block {
			position: fixed;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.2);
			z-index: 999;
			width: 100vw;
			height: 100vh;

			.choose-content {
				width: 100%;
				height: auto;
				background: #fff;
				z-index: 9999;
				position: fixed;
				transform: translate(-50%, 0%);
				left: 50%;
				bottom: 0;
				display: flex;
				flex-direction: column;
				box-shadow: 0 0 10px 0px #dadada;
				min-height: 50vh;
				border-radius: 30rpx;
				padding: 30rpx;

				.choose {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					border-bottom: 1px solid #F5F9FC;
					padding-bottom: 40rpx;

					.choose-item {
						display: flex;
						flex-direction: row;
						//align-items: center;
						width: 100%;

						.choose-img {
							width: 160rpx;
							height: 160rpx;
							border-radius: 20rpx;
							background-color: #F5F9FC;
							margin-right: 30rpx;
						}

						.name-item {
							width: calc(100% - 240rpx);

							.choose-name {
								word-break: break-all;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								/* 超出几行省略 */
								overflow: hidden;
								margin-bottom: 20rpx;
							}

							.wage {
								color: #157DFA;
								font-size: 32rpx;

								.txt {
									font-size: 40rpx;
									margin-right: 10rpx;
								}
							}
						}
					}
				}

				.count-block {
					display: flex;
					flex-direction: column;
					padding-top: 40rpx;

					.count-title {
						font-size: 34rpx;
					}

					.count-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 20rpx;

						.inventory {
							color: #828282;
							font-size: 32rpx;
						}

						.operation-block {
							flex-grow: 0;
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-top: 30rpx;
							background: #F5F9FC;
							border-radius: 60rpx;

							.num {
								margin: 0 30rpx;
							}

							.btn {
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 32rpx;
								border-radius: 50%;
								width: 80rpx;
								height: 80rpx;
								background: #efefef;
								color: #fff;
							}

							.iconfont {
								color: #000;

							}

							.btn.disabled {
								background: #efefef;
								color: #EEEEEE;
							}
						}
					}
				}

				.btn-item {
					width: calc(100% - 60rpx);
					display: flex;
					justify-content: center;
					margin-top: 150rpx;
					margin-left: 30rpx;

					.btn {
						background: #157DFA;
						color: #fff;
						width: 340rpx;
						height: 80rpx;
						border-radius: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>